<template>
  <!--  振动 -->
  <div class="monitor_page">
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="hover">
      <div class="filter_header">
        <el-form ref="form" label-width="100px">
          <div class="monitor_page-filter" v-show="!isToggleStatus">
            <el-form-item label="起止时间：">
              <el-date-picker
                style="width:100%;min-width:240px"
                size="small"
                value-format="timestamp"
                v-model="timerArray"
                type="datetimerange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">

          <div class="monitor_page-filter-left">

            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
            </button>
            <el-button
              size="small"
              @click="confirmDelete"
              icon="el-icon-delete-solid"
              v-if="hasPermission('monitor:record:del')"
              type="danger">删除
            </el-button>
            <el-button
              size="small"
              plain
              v-if="jiuGanKeJi"
              type="primary"
              @click="lookEquipRecord(timerArray,equipId)">运行日志
            </el-button>


          </div>
          <el-select v-model="calcTypeData" style="width: 150px;"  placeholder="采集类型">
            <el-option
              v-for="item in EnumQuakeCalcTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
          <el-button
            v-show="!isToggleStatus"
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            style="margin-left: 10px"
            @click="form.page=1;$emit('update')">搜索
          </el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column type="selection" width="28">
        </el-table-column>
        <el-table-column prop="createTime" label="数据采集时间" min-width="135">
          <template slot-scope="scope">
            {{scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column prop="xg" label="xg(g)" min-width="100">
        </el-table-column>
        <el-table-column prop="yg" label="yg(g)" min-width="100">
        </el-table-column>
        <el-table-column prop="zg" label="zg(g)" min-width="100">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>
    <!-- 绘图部分-->
    <div class="monitor_page-right">
      <el-card class="card_echarts" shadow="hover">
        <echarts-ten-change @showRemarkDailog1="showRemarkDailog" ref="echartsTenChange"></echarts-ten-change>
      </el-card>
    </div>
    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="handleClose"
      :close-on-click-modal="false">
      <div style="height: 50vh">
        <echarts-ten-draw @showRemarkDailog1="showRemarkDailog" ref="echartsTenDraw1"></echarts-ten-draw>

      </div>
    </el-dialog>
  </div>
</template>

<script>
  import EchartsTenChange from "../monitor-echarts/base/echarts-13-change";
  import EchartsTenDraw from "../monitor-echarts/base/echarts-13-draw";
  import Format from '@/utils/format'

  import ItemMixins from './item.mixins'
  import {getDictData} from '@/services/model/common'

  export default {
    mixins: [ItemMixins],
    components: {EchartsTenChange, EchartsTenDraw},
    props: ["calcType",],
    data() {
      return {
        dialogTitle: "111",
        isShowDialog: false,
        EnumQuakeCalcTypeList: [],
        // 当前的图表钩子
        chartsName: ['echartsTenChange'],
        // 分页参数
        form: {
          page: 1,
          pageSize: 10,
          total: 0,

        },

      }
    },
    computed: {
      calcTypeData: {
        get() {
          return this.calcType;
        },
        set(value) {
          this.$emit("update:calcType", value);
        },
      }
    },
    methods: {
      handleClose() {
        this.isShowDialog = false;
      },
      showRemarkDailog(data, list) {
        this.dialogTitle = Format(new Date(data.data[0]))+'动态采集曲线图'
        this.isShowDialog = true;
        let index = list.recordList.length - 1 - data.dataIndex
        this.$nextTick(() => {
          this.$refs.echartsTenDraw1.updateEchart(list, index)
        })

      },
      // 通用获取枚举方法
      async queryDictData(enumName, model) {
        const {data} = await getDictData({enumName})
        if (model) this[model] = data || []
        return data || []
      },
    },
    mounted() {
      this.queryDictData('EnumQuakeCalcType', 'EnumQuakeCalcTypeList')

    }
  }
</script>

<style lang="less" scoped="scoped">
  @import url('./commom.less');

  // 还需自定义的css
  .card_echarts {
    height: 550px;
  }

  .el-card {
    background: transparent;
  }


</style>

